<template>
  <div class="friend_item hover">
    <!-- 头像 -->
    <img :src="friend.avatar" class="avatar" v-if="friend.avatar">
    <div class="avatar border" v-else>
      {{ friend.nick.substring(0,1) }}
    </div>

    <div class="user_name">
      <span>
        {{ friend.nick }}
      </span>
    </div>

  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue';

export interface FriendItemType {
  userId: number,
  nick: string,
  avatar: string,
}

const props = defineProps({
  friend: {
    type: Object as PropType<FriendItemType>,
    required: true
  }
})

</script>

<style lang="scss" scoped>
.friend_item {
  padding: 10px;
  display: flex;
  gap: 5px;
  user-select: none;

  .user_name {
    display: flex;
    align-items: center;
  }

  .border{
    border: 1px solid black;
  }
}
</style>
